<script setup>
import StatisticalBox from './StatisticalBox';
import { homeData, noticeMock, questionMock } from './constants';
import { ref } from 'vue';
import { ElSelect, ElOption } from 'element-plus';
import Panel from '@/components/basic/Panel';
import { SalesPie, OrderPie, MixLineBar } from '@/components/business/echart';

const statisticData = ref(homeData);

// 公告列表
const noticeList = ref(noticeMock);

// 常见问题
const questionList = ref(questionMock);
</script>
<template>
  <div class="home-page wh-full flex flex-col box-border">
    <!-- 
      首页头部，
      1. 6个统计块
      2. 每个小块由图标、标题、数字组成
      3. 左边是正方形包裹图标，右边居中数字、数字下面是标题
    -->
    <div class="flex flex-row justify-between items-center gap-20px box-border">
      <StatisticalBox
        v-for="(i, k) in statisticData"
        :key="k"
        :icon="i.icon"
        :title="i.name"
        :count="i.count"
        :color="i.color"
      />
    </div>

    <div class="w-full flex flex-row gap-20px mt-20px">
      <Panel class="w-1/2">
        <template #header>
          <div class="card-header font-size-14px">
            <span>国家订单数及销量细明</span>
          </div>
        </template>
        <div class="flex flex-row gap-20px">
          <div class="w-1/2">
            <SalesPie />
          </div>
          <div class="w-1/2 relative">
            <OrderPie />
            <ElSelect class="absolute right-0 top-0 z-10 w-100px" size="small" placeholder="请选择">
              <ElOption label="全部" value="0" />
              <ElOption label="china" value="1" />
            </ElSelect>
          </div>
        </div>
      </Panel>
      <Panel class="w-1/2">
        <template #header>
          <div class="card-header font-size-14px">
            <span>订单统计</span>
          </div>
        </template>
        <div class="flex">
          <MixLineBar />
        </div>
      </Panel>
    </div>

    <div class="w-full flex flex-row gap-20px mt-20px h-20%">
      <Panel class="w-1/2">
        <template #header>
          <div class="card-header font-size-14px">
            <span>公告</span>
          </div>
        </template>
        <div v-for="(i, k) in noticeList" :key="k" class="text-center w-full flex-bc text-link font-size-14px">
          <div>{{ i.title }}</div>
          <div>{{ i.time }}</div>
        </div>
      </Panel>
      <Panel class="w-1/2">
        <template #header>
          <div class="card-header font-size-14px">
            <span>常见问题</span>
          </div>
        </template>
        <div v-for="(i, k) in questionList" :key="k" class="text-center w-full flex-bc text-link font-size-14px">
          <div>{{ i.title }}</div>
          <div>{{ i.time }}</div>
        </div>
      </Panel>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.home-page {
  --el-card-padding: 10px;
}
</style>
